import {useRouter} from 'next/router';

export function ActiveLink({ children, href }) {
  const router = useRouter();
  const style = {
    marginRight: 10,
    color: router.pathname === href ? 'red'/**← 如果是当前激活的路由的链接就显示红色*/ : 'black',
  };

  const handleClick = e => {
    e.preventDefault();
    router.push(href)
  };

  return (
    <a href={href} onClick={handleClick} style={style}>
      {children}
    </a>
  )
}
